<template>
	<view class="m-mg-lr-20">
		<u--image :showLoading="true" :src="huodong.images.split(',')[0]" width="100%" mode="widthFix"></u--image>

		<view class="huodong">
			<view class="u-p-t-30">
				活动主题：
				<text class="m-font-b">{{ huodong.name }}</text>
			</view>
			<view class="u-p-t-30 u-flex">
				<text class="m-flex-no">活动规则：</text>
				<view>
					<u-parse :content="huodong.content"></u-parse>
				</view>
			</view>
			<view class="u-p-t-30">
				活动时间：{{ $u.timeFormat(huodong.startdatetime, 'yyyy年mm月dd日') }}-{{ $u.timeFormat(huodong.enddatetime, 'yyyy年mm月dd日') }}
			</view>
			<view class="u-p-t-30 u-flex">
				<text class="m-flex-no">活动奖品：</text>
				<view class="m-c1">
					<u-parse :content="huodong.jiangpin"></u-parse>
				</view>
			</view>
			<view class="canjia" @click="nextNav('/pages/christmasr/baoming')">立即报名</view>
		</view>

		<view class="daojishi u-flex u-flex-center u-flex-items-center u-m-t-30">
			<view>距离结束时间：</view>
			<u-count-down :time="huodong.enddatetime * 1000 - Date.parse(new Date())" format="HH:mm:ss" autoStart
				millisecond @change="onChange">
				<view class="time">
					<view class="time__custom">
						<text
							class="time__custom__item">{{ timeData.days > 10 ? timeData.days : '0' + timeData.days }}</text>
					</view>
					<text class="time__doc">天</text>
					<view class="time__custom">
						<text
							class="time__custom__item">{{ timeData.hours > 10 ? timeData.hours : '0' + timeData.hours }}</text>
					</view>
					<text class="time__doc">时</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.minutes }}</text>
					</view>
					<text class="time__doc">分</text>
					<view class="time__custom">
						<text class="time__custom__item">{{ timeData.seconds }}</text>
					</view>
					<text class="time__doc">秒</text>
				</view>
			</u-count-down>
		</view>

		<view class="m-bg-w u-p-t-15 u-p-b-15 u-m-t-20">
			<u-search placeholder="请输入号码" height="40" bg-color="transparent" v-model="keyword" :show-action="false"
				@change="$u.debounce(input_blur, 500)"></u-search>
		</view>
		<view v-if="dataList.length">
			<view class="u-flex u-flex-wrap u-flex-between u-m-b-30">
				<view class="piao-box u-m-t-30" v-for="(item, index) in dataList" :key="index">
					<u--image :showLoading="true" :src="item.images.split(',')[0]" width="345rpx" height="345rpx">
					</u--image>
					<view class="piaohao">
						{{ item.number }}
						<text class="u-font-8">号</text>
					</view>
					<view class="u-font-30 u-m-t-20 m-t-c">{{ item.name }}</view>
					<view class="m-c-9e u-m-t-36 m-t-c">
						<text class="u-font-30">{{ item.num }}</text>
						票
					</view>
					<view class="m-btn-g2 tou1" @click="toupiao(1, item)">投票</view>
				</view>
			</view>
		</view>
		<list-empty v-else text="暂时没有数据哟!" list="data" :listHighly="300"></list-empty>
		<u-popup :show="show" @close="close" mode="center">
			<view class="boxding">
				<view v-if="tou">
					<view class="m-t-c u-font-40">{{ huodong.name }}</view>
					<view class="u-p-t-60 u-p-b-60 u-m-b-60 u-border-bottom">
						<u--image :showLoading="true" :src="item.images.split(',')[0]" width="300" height="300">
						</u--image>
					</view>
					<view class="u-flex u-flex-between u-flex-items-end">
						<view class="">
							<view class="u-flex u-flex-items-center">
								<u--image :showLoading="true" :src="item.avatar" width="50" height="50" shape="circle">
								</u--image>
								<view class="u-m-l-28">
									<view class="haoma">{{ item.id }}号</view>
									<view class="m-c-94 u-m-t-15">{{ item.name }}</view>
								</view>
							</view>
							<view class="u-m-t-70 m-c-g">请帮我投出您宝贵的一票吧！</view>
							<view class="tou3 u-flex u-flex-center">
								<text class="u-m-r-15">长按识别二维码</text>
								<u-icon name="jiantou3" customPrefix="master" color="#fff" size="14"></u-icon>
							</view>
						</view>
						<u--image :showLoading="true" :src="item.qr" width="100" height="100"></u--image>
					</view>
				</view>
				<view v-else>
					<view class="u-border-bottom u-p-b-25 u-font-30">{{ item.name }}</view>
					<view class="u-flex u-p-t-50 u-p-b-40">
						<view class="u-flex-1 m-t-c">
							<view class="m-big-f">{{ item.pm}}</view>
							<view>排名</view>
						</view>
						<view class="u-flex-1 m-t-c">
							<view class="m-big-f">{{ item.disparity }}</view>
							<view>距离前一名</view>
						</view>
						<view class="u-flex-1 m-t-c">
							<view class="m-big-f">{{ item.num }}</view>
							<view>票数</view>
						</view>
					</view>
					<view class="u-flex u-flex-between u-flex-wrap">
						<view class="u-m-b-15" v-if="ix < 4" v-for="(it, ix) in item.images.split(',')" :key="ix">
							<u--image :showLoading="true" :src="it" :width="ix > 0 ? '95' : '300'"
								:height="ix > 0 ? '95' : '300'"></u--image>
						</view>
					</view>
					<view class="m-btn-g2 tou2" @click="toupiao(2, item.id)">投他一票</view>
					<view class="kong" @click="tou = true">帮TA拉票</view>
				</view>
			</view>
		</u-popup>
		<view class="fukuang" @click="nextNav('/pages/christmasr/leaderboard?id='+id)">排行榜</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				huodong: {
					images: ''
				},
				timeData: {},
				dataList: [],
				item: {
					images: ''
				},
				show: false,
				tou: false,
				keyword: '',
				id: null
			};
		},
		onShareAppMessage(res) {
			return {
				title: this.huodong.name,
				path: '/pages/christmasr/christmasr?id='+this.huodong.id,
				imageUrl: this.huodong.images.split(',')[0]
			}
		},
		async onShow() {
			this.show = false;
			this.tou = false;
			let huodong = await this.require('toupiao', {
				id: this.id
			});
			if (huodong) {
				this.huodong = huodong;
			}
			this.path = 'toupiaolist';
			this.params = {
				...this.params,
				pnum: this.pnum,
				id: this.id,
				number: this.keyword
			};
			await this.getList();
		},
		async onLoad(e) {
			if (e && e.id) {
				this.id = e.id;
				let huodong = await this.require('toupiao', {
					id: e.id
				});
				if (huodong) {
					this.huodong = huodong;
				}
			}
			this.path = 'toupiaolist';
			this.params = {
				...this.params,
				pnum: this.pnum,
				id: e.id,
				number: this.keyword
			};
			await this.getList();
		},
		methods: {
			onChange(e) {
				this.timeData = e;
			},
			close() {
				this.show = false;
				setTimeout(() => {
					this.tou = false;
				}, 100);
			},
			async toupiao(type, item) {
				if (type == 1) {
					this.item = item;
					this.show = true;
				} else {
					// 向后台投票
					let toupiaouser = await this.require('toupiaouser', {
						id: item
					});
					if (toupiaouser) {
						this.nextNav('/pages/christmasr/touok?id=' + this.id);
					} else {
						this.$u.toast('每天只能投3次票！');
					}
				}
			},
			async input_blur() {
				if (this.keyword % 1 != 0) {
					return uni.$u.toast('请输入数字')
				}
				this.params.p = 1;
				this.params.number = this.keyword;
				await this.getList();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.huodong {
		background-color: #fff;
		padding: 0 20rpx 40rpx 60rpx;
		position: relative;
	}

	.fukuang {
		position: fixed;
		right: 0;
		top: 770rpx;
		width: 190rpx;
		height: 85rpx;
		line-height: 85rpx;
		padding-right: 20rpx;
		text-align: right;
		background-image: url('https://neidangjia.oss-accelerate.aliyuncs.com/christmasr/fukuang.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		color: #fff;
	}

	.daojishi {
		width: 710rpx;
		height: 102rpx;
		background-image: url('https://neidangjia.oss-accelerate.aliyuncs.com/christmasr/bg1.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			width: 30px;
			height: 30px;
			background-image: url('https://neidangjia.oss-accelerate.aliyuncs.com/christmasr/bg2.png');
			background-repeat: no-repeat;
			background-size: 100% auto;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	.piao-box {
		position: relative;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		padding-bottom: 20rpx;
	}

	.m-c1 {
		color: #229e7c;
	}

	.piaohao {
		position: absolute;
		top: 0;
		background-color: #0e5642;
		color: #fff;
		padding: 5rpx;
		border-bottom-right-radius: 15rpx 15rpx;
	}

	.tou1 {
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-top: 40rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.boxding {
		overflow-y: auto;
		height: 90vh;
		width: 96vw;
		padding: 50rpx 60rpx;
	}

	.m-big-f {
		font-size: 48rpx;
	}

	.tou2 {
		height: 72rpx;
		font-size: 30rpx;
		line-height: 72rpx;
		margin-top: 40rpx;
	}

	.kong {
		text-align: center;
		border-radius: 70rpx;
		border: 2px solid #0e5642;
		color: #0e5642;
		line-height: 68rpx;
		margin-top: 20rpx;
		font-size: 30rpx;
	}

	.haoma {
		font-size: 48rpx;
		color: #0e5642;
	}

	.m-c-94 {
		color: #949494;
	}

	.tou3 {
		width: 240rpx;
		height: 46rpx;
		line-height: 46rpx;
		margin-top: 30rpx;
		background-color: #0e5642;
		border-radius: 100rpx;
		color: #fff;
	}

	.canjia {
		position: absolute;
		right: 20rpx;
		top: 18rpx;
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-image: url('https://neidangjia.oss-accelerate.aliyuncs.com/christmasr/canjia.png');
		background-repeat: no-repeat;
		background-size: 150rpx 60rpx;
		color: #fff;
	}
</style>
